<template>
  <div>
    <el-dialog
      title="已审核供应商信息"
      :visible.sync="visible"
      width="80%"
      :before-close="cancel"
      @open="open"
    >
      <div class="dialog-content">
        <el-descriptions class="margin-top" :column="3" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline" />
              头像
            </template>
            <el-image
              style="width: 45px; height: 45px"
              :src="supplierInfo.avatar"
            />
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user" />
              用户名
            </template>
            {{ supplierInfo.username }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user" />
              账号编号
            </template>
            {{ supplierInfo.id }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone" />
              手机号
            </template>
            {{ supplierInfo.phone }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone" />
              邮箱
            </template>
            {{ supplierInfo.email }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone" />
              状态
            </template>
            <font style="color: red; font-weight: bold">{{
              supplierInfo.state
            }}</font>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building" />
              所在分组
            </template>
            {{ supplierInfo.business.toString() }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone" />
              公司名称
            </template>
            {{ supplierInfo.companyInfo.companyName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone" />
              公司地址
            </template>
            {{ supplierInfo.companyInfo.companyAddress }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone" />
              公司网址
            </template>
            {{ supplierInfo.companyInfo.companyWebsite }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone" />
              公司电话
            </template>
            {{ supplierInfo.companyInfo.companyPhone }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone" />
              公司传真
            </template>
            {{ supplierInfo.companyInfo.companyFax }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone" />
              公司邮箱
            </template>
            {{ supplierInfo.companyInfo.companyEmail }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone" />
              法人代表
            </template>
            {{ supplierInfo.companyInfo.corporateRepresentative }}
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label">
              <i class="el-icon-mobile-phone" />
              法人身份证
            </template>
            {{ supplierInfo.companyInfo.identityCard }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    // eslint-disable-next-line vue/require-default-prop
    mainInfo: {
      type: Object,
    },
  },
  data() {
    return {
      supplierInfo: {
        avatar: "",
        id: "",
        username: "",
        phone: "",
        email: "",
        state: "",
        business: [],
        companyInfo: {
          companyName:'',
          acompanyAddress:'',
          companyWebsite:'',
          companyFax:'',
          companyPhone:"",
          companyEmail:"",
          corporateRepresentativea:'',
          identityCard:''
        },
      },
    };
  },
  methods: {

    open(){
      this.mainInfo.groups = [];
      const business = this.mainInfo.groups.map((group) => {
        return group.productName;
      });
      this.supplierInfo = this.mainInfo;
      this.supplierInfo.business = business;
      this.supplierInfo.state = this.mainInfo.state === -1 ? '已驳回' : '已通过';
    },

    cancel() {
      this.initSupplierInfo();
      this.$emit("cancel");
    },
    initSupplierInfo(){
      this.supplierInfo = {
        avatar: "",
        id: "",
        username: "",
        phone: "",
        email: "",
        state: "",
        business: [],
        companyInfo: {
          companyName:'',
          acompanyAddress:'',
          companyWebsite:'',
          companyFax:'',
          companyPhone:"",
          companyEmail:"",
          corporateRepresentativea:'',
          identityCard:''
        },
      }
    }
  },
};
</script>

<style>
</style>
